<template>
  <div>
    <div class="overlay nav-btm">
      <div class="overlay-content scrolling">
        <div class="swiper-container" style="height: 180px;">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in list" :key="index">
              <img :src="item.img"/>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <van-row class="box" type="flex" justify="center">
          <!-- <van-col span="6" @click.native="OutChange()" v-if="showQR ==0">
            <img src="../assets/images/l-qr3.png" alt="">
            <p>扫一扫</p>
          </van-col> -->
          <van-col span="6" @click.native="OutChange()">
            <img src="../assets/images/ewm.png" alt="">
            <p>{{$t('Home.v1')}}</p>
          </van-col>
          <van-col span="6" @click.native="$router.push({path: '/ToChange'})">
            <img src="./../assets/images/h2.png" alt="">
            <p>{{$t('Home.v2')}}</p>
          </van-col>
          <van-col span="6" @click.native="$router.push({path: '/Assets'})">
            <img src="./../assets/images/h3.png" alt="">
            <p>{{$t('Home.v3')}}</p>
          </van-col>
          <van-col span="6" @click.native="service()">
            <img src="./../assets/images/h4.png" alt="">
            <p>{{$t('Home.v4')}}</p>
          </van-col>
        </van-row>
        <div class="scrollDiv">
          <swiper auto loop height="40px" direction="vertical" :interval='2000' class="text-scroll" :show-dots="false">
            <swiper-item v-for="item,index of list2" :key='index'>
              <p @click="toNewsDetails(item.id)">{{item.title}}</p>
            </swiper-item>
          </swiper>
          <router-link tag="a" class="more1 gold" to="/NewsList">
            <van-icon name="arrow"/>
          </router-link>
        </div>
        <div style="padding: 10px;background: rgb(40,45,65);padding-bottom:0px;">
          <div style="border-left: 3px solid #00dd94;padding-left: 10px;margin-bottom: 10px;">{{$t('Home.v5')}}</div>
          <section class="su">
            <ul class="box">
              <li>
                <div align="left" class="left" @click="$router.push({path: '/DepositMmoney'})">
                  <img src="../assets/images/sm1.png" class="img" v-if="leng == 1"/>
                  <img src="../assets/images/1.png" class="img" v-if="leng == 2 || leng == undefined"/>
                  <img src="../assets/images/3.png" class="img" v-if="leng == 3"/>
                </div>
              </li>
              <li>
                <div align="left" class="left" @click="Snatch">
                  <img src="../assets/images/sm2.png" class="img" v-if="leng == 1"/>
                  <img src="../assets/images/2.png" class="img" v-if="leng == 2 || leng == undefined"/>
                  <img src="../assets/images/4.png" class="img" v-if="leng == 3"/>
                </div>
              </li>
            </ul>
            <img src="../assets/images/sm3.png" class="img" v-if="leng == 1" @click="PropertyCrowdfunding"/>
            <img src="../assets/images/5.png" class="img" v-if="leng == 2 || leng == undefined" @click="PropertyCrowdfunding"/>
            <img src="../assets/images/6.png" class="img" v-if="leng == 3" @click="PropertyCrowdfunding"/>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {Dialog} from 'vant';
    import {home} from './../utils/api';
    import {Swiper, SwiperItem, Actionsheet} from 'vux';
    import Swiper2 from 'swiper';
    import 'swiper/dist/css/swiper.min.css';

    let _this;
    export default {
        data() {
            return {
                list: [],
                list2: '',
                Customer: '',
                showQR: 0,
                leng: ''
            }
        },
        components: {
            Swiper,
            SwiperItem,
            Actionsheet
        },
        beforeCreate() {
            _this = this;
        },
        created() {
            // 页面不需要登录就能访问切页面上有请求接口，登录和不登录的时候。需要添加此代码
            if (sessionStorage.token) {
                this.axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
            }
            this.getList(); // 获取首页轮播图
        },
        mounted() {
            this.leng = localStorage.leng;
            if (window.plus) {
                this.showQR = 0;
            } else {
                this.showQR = 1;
            }
        },
        methods: {
            Snatch(){
                this.$router.push({path: '/Snatch'})
            },
            PropertyCrowdfunding() {
                // Dialog.alert({
                //     title: this.$t('Home.v11'),
                //     confirmButtonText: 'OK'
                // }).then(() => {
                //     // on close
                // });
               this.$router.push({path: '/PropertyCrowdfunding',query: {roid: '/'}})
            },
            toNewsDetails(id) { // 公告
                this.$router.push({
                    name: 'NewsDetails',
                    query: {
                        id: id
                    }
                })
            },
            getList() {
                home.getBanner().then(res => {
                    if (res.code == 200) {
                        const baseList = [];
                        for (let i = 0; i < res.data.value.split(";").length; i++) {
                            baseList.push({
                                img: res.data.value.split(";")[i]
                            })
                        }
                        this.list = baseList;
                    }
                })
                home.getNoticesNewest().then(res => {
                    if (res.code == 200) {
                        this.list2 = res.data;
                    }
                })
            },
            OutChange() {
                if (sessionStorage.Account) {
                    this.axios.get(process.env.API_HOST + 'user/getIsTradePass').then(res => { // 判断是还是设置支付密码
                        if (res.data.data == 1) { // 当true为已设置交易密码
                            if (this.showQR == 0) {
                                this.$router.push({
                                    // path: '/OutChange',
                                    path: '/Qr',
                                    query: {
                                        sao: 'saoyisao'
                                    }
                                });
                            } else if (this.showQR == 1) {
                                this.$router.push({
                                    path: '/OutChange',
                                    query: {
                                        sao: 'saoyisao'
                                    }
                                })
                            }

                        } else {
                            let _this = this
                            Dialog.confirm({
                                message: _this.$t('Home.v6') + '！',
                                confirmButtonText: _this.$t('Home.v7'),
                                cancelButtonText: _this.$t('Home.v8'),
                                cancelButtonColor: 'white'
                            }).then(() => {
                                _this.$router.push({
                                    path: '/UpdatePayPwd',
                                    query: {
                                        type: 0
                                    }
                                })
                            }).catch(() => { //稍后设置

                            });
                        }
                    })

                } else {
                    this.$toast(_this.$t('Home.v9'));
                    this.$router.push({
                        path: '/Login'
                    })
                }
            },
            service() { // 客服弹窗
                home.getCustomer().then(res => {
                    if (res.code == 200) {
                        this.Customer = res.data.value.split("|").join("<br/>").replace(/\s*/g, "");
                        Dialog.alert({
                            title: _this.$t('Home.v10'),
                            messageAlign: 'left',
                            message: this.Customer,
                            confirmButtonText: 'OK'
                        }).then(() => {
                            // on close
                        });
                    }
                })
            }
        },
        watch: {
            list: function () {
                _this.$nextTick(function () {
                    var swiper = new Swiper2('.swiper-container', {
                        effect: 'coverflow',
                        grabCursor: true,
                        centeredSlides: true,
                        slidesPerView: 'auto',
                        loop: true,
                        //自动播放
                        autoplay: {
                            delay: 3000
                        },
                        coverflowEffect: {
                            rotate: 40,
                            stretch: 0,
                            depth: 100,
                            modifier: 1,
                            slideShadows: true,
                        },
                        pagination: {
                            el: '.swiper-pagination',
                        }
                    });
                });
            }
        }
    }
</script>

<style lang="less" scoped>
  .head ~ .overlay {
    top: 45px;
    background: #1a2e58;
  }

  .van-notice-bar {
    height: 30px;
  }

  .scrollDiv {
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    position: relative;
    background: url(../assets/images/gd.png) no-repeat 10px center;
    background-size: 20px;
    padding: 4px 50px 4px 40px;
    margin: 0 10px;
    border-radius: 2px;
    margin-bottom: 10px;
  }

  .scrollDiv .more1 {
    position: absolute;
    right: 10px;
    top: 6px;
    color: #FFFFFF;
  }

  .scrollDiv p {
    font-size: 13px;
  }

  .img {
    width: 100%;
    border-radius: 5px;
  }

  .swiper-container {
    width: 100%;
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 180px;

    img {
      width: 100%;
      height: 180px;
      border-radius: 6px;
    }
  }

  /deep/ .swiper-pagination-bullet-active {
    background: #00dd94;
  }

  .box {
    padding: 20px 0;
    text-align: center;
    font-size: 13px;

    img {
      width: 26px;
      height: 26px;
      padding-bottom: 2px;
    }
  }

  /deep/ .weui-cell:before {
    border-top: 0;
  }

  .ranking_list {
    i {
      display: inline-block;
      width: 26px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      background: url(./../assets/images/z4.png) no-repeat;
      background-size: 26px;
      font-size: 12px;
      padding-right: 10px;
    }

    i.One {
      background: url(./../assets/images/z1.png) no-repeat;
      background-size: 26px;
    }

    i.two {
      background: url(./../assets/images/z2.png) no-repeat;
      background-size: 26px;
    }

    i.three {
      background: url(./../assets/images/z3.png) no-repeat;
      background-size: 26px;
    }

    .today {
      font-size: 12px;
      color: #7d85a1;
    }

    .price {
      color: #b0afaf;
      font-size: 12px;
    }

    .gain {
      span {
        display: inline-block;
        width: 70px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
      }
    }
  }

  /deep/ .weui-cells:after {
    border-bottom: 0;
  }

  .su section {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .su ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .su .box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .su .box li {
    width: calc(~"50% - 6px");
    margin-bottom: 10px;
    margin-top: 5px;
  }

  .su .img {
    width: 100%;
    height: 100%;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
</style>
